/**
 * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
 * SPDX-License-Identifier: MIT
 */

import { useMemo, useState } from 'react';
import { Button, Modal, Card  } from 'antd';


import { createMinimapPlugin } from '@flowgram.ai/minimap-plugin';
import { createFreeSnapPlugin } from '@flowgram.ai/free-snap-plugin';
import {
  FreeLayoutProps,
  WorkflowNodeProps,
  WorkflowNodeRenderer,
  Field,
  useNodeRender,
  domUtils,
} from '@flowgram.ai/free-layout-editor';

import { nodeRegistries } from '../node-registries';
import { initialData } from '../initial-data';
import { AssetSelectionButton } from '../forms/asset-select';
import { SectionEdit } from '../forms/section_edit';
import { MoneyIn } from '../forms/money-in';

export const useEditorProps = () =>
  useMemo<FreeLayoutProps>(
    () => ({
      /**
       * Whether to enable the background
       */
      background: true,
      /**
       * Whether it is read-only or not, the node cannot be dragged in read-only mode
       */
      readonly: false,
      /**
       * Initial data
       * 初始化数据
       */
      initialData,
      /**
       * Node registries
       * 节点注册
       */
      nodeRegistries,
      /**
       * 节点数据转换, 由 ctx.document.fromJSON 调用
       * Node data transformation, called by ctx.document.fromJSON
       * @param node
       * @param json
       */
      fromNodeJSON(node, json) {
        return json;
      },
      /**
       * 节点数据转换, 由 ctx.document.toJSON 调用
       * Node data transformation, called by ctx.document.toJSON
       * @param node
       * @param json
       */
      toNodeJSON(node, json) {
        return json;
      },
      /**
       * Get the default node registry, which will be merged with the 'nodeRegistries'
       * 提供默认的节点注册，这个会和 nodeRegistries 做合并
       */
      getNodeDefaultRegistry(type) {
        return {
          type,
          meta: {
            defaultExpanded: true,
          },
          formMeta: {
            /**
             * Render form
             */
            render: () => (
              <>
                <Field<string> name="title">
                  {({ field }) => (
                    // 通过 form 获取当前节点数据
                    <Card title={field.value} variant="borderless" style={{ width: 400 }}>
                      {type === 'condition' && (
                        <>
                          <div>出租 or 转让</div>
                        </>
                      )}
                      {type === 'section_edit' && (
                        <>
                          <SectionEdit />
                        </>
                      )}

                      {type === 'asset_edit' && (
                        <>
                          <AssetSelectionButton />
                        </>
                      )}
                      {type === 'money_receive' && (
                        <>
                          <MoneyIn />
                        </>
                      )}
                    </Card>
                  )}
                </Field>
              </>
            ),
          },
        };
      },
      materials: {
        renderDefaultNode: (props: WorkflowNodeProps) => {
          const { form, node } = useNodeRender();

          const handleDelete = () => {
            // 调用删除节点的方法, 删除前确认下
            if (confirm('确定要删除吗？')) {
              props.node.dispose();
            }
          };

          return (
            <WorkflowNodeRenderer className="demo-free-node" node={props.node}>
              {form?.render()}
              {/* 删除按钮 */}
              <button
                className="node-delete-button"
                onClick={handleDelete}
                style={{
                  position: 'absolute',
                  top: 0,
                  right: 0,
                  background: 'none',
                  border: 'none',
                  fontSize: '16px',
                  cursor: 'pointer',
                }}
              >
                &times;
              </button>
              {/* 条件节点的输出端口 */}
              {node.flowNodeType === 'condition' && (
                <div
                  data-port-id="if"
                  data-port-type="output"
                  style={{ position: 'absolute', right: 0, top: '33%' }}
                />
              )}
              {node.flowNodeType === 'condition' && (
                <div
                  data-port-id="else"
                  data-port-type="output"
                  style={{ position: 'absolute', right: 0, top: '66%' }}
                />
              )}
            </WorkflowNodeRenderer>
          );
        }
      },
      /**
       * Content change
       */
      onContentChange(ctx, event) {
        console.log('Auto Save: ', event, ctx.document.toJSON());
      },
      // /**
      //  * Node engine enable, you can configure formMeta in the FlowNodeRegistry
      //  */
      nodeEngine: {
        enable: true,
      },
      /**
       * Redo/Undo enable
       */
      history: {
        enable: true,
        enableChangeNode: true, // Listen Node engine data change
      },
      /**
       * Playground init
       */
      onInit: (ctx) => {},
      /**
       * Playground render
       */
      onAllLayersRendered(ctx) {
        //  Fitview
        ctx.document.fitView(false);
        console.log('---- Playground Rendered ----');
        //设置id为node_0的节点的边框为红色
        // const node = document.getElementById('node_0');
        // if (node) {
        //   const styles = {
        //     borderColor: 'red',
        //     borderWidth: '2px',
        //     borderStyle: 'dashed',
        //     padding: '10px',
        //     backgroundColor: '#f0f0f0',
        //   };
        //   domUtils.setStyle(node, styles);
        // }
      },
      /**
       * Playground dispose
       */
      onDispose() {
        console.log('---- Playground Dispose ----');
      },
      plugins: () => [
        /**
         * Minimap plugin
         * 缩略图插件
         */
        createMinimapPlugin({
          disableLayer: true,
          canvasStyle: {
            canvasWidth: 182,
            canvasHeight: 102,
            canvasPadding: 50,
            canvasBackground: 'rgba(245, 245, 245, 1)',
            canvasBorderRadius: 10,
            viewportBackground: 'rgba(235, 235, 235, 1)',
            viewportBorderRadius: 4,
            viewportBorderColor: 'rgba(201, 201, 201, 1)',
            viewportBorderWidth: 1,
            viewportBorderDashLength: 2,
            nodeColor: 'rgba(255, 255, 255, 1)',
            nodeBorderRadius: 2,
            nodeBorderWidth: 0.145,
            nodeBorderColor: 'rgba(6, 7, 9, 0.10)',
            overlayColor: 'rgba(255, 255, 255, 0)',
          },
          inactiveDebounceTime: 1,
        }),
        /**
         * Snap plugin
         * 自动对齐及辅助线插件
         */
        createFreeSnapPlugin({
          edgeColor: '#00B2B2',
          alignColor: '#00B2B2',
          edgeLineWidth: 1,
          alignLineWidth: 1,
          alignCrossWidth: 8,
        }),
      ],
    }),
    []
  );
